import React, { Component } from 'react'
import { Text, StyleSheet, View, ScrollView } from 'react-native'

export default class JustifyContent extends Component {
  render() {
    return (
      <View style={{height: '100%'}}>
        <Text style={styles.h2}> 主轴方向对齐方式 </Text>
        <ScrollView>
            <Text style={styles.h3}> JustifyContent: 'flex-start' </Text>
            <View style={[styles.container,styles.Row,styles.flexStart]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> JustifyContent: 'center' </Text>
            <View style={[styles.container,styles.Row,styles.flexCentent]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> JustifyContent: 'flex-end' </Text>
            <View style={[styles.container,styles.Row,styles.flexEnd]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> JustifyContent: 'space-around' </Text>
            <View style={[styles.container,styles.Row,styles.flexAround]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> JustifyContent: 'flex-evenly' </Text>
            <View style={[styles.container,styles.Row,styles.flexEvenly]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> JustifyContent: 'flex-between' </Text>
            <View style={[styles.container,styles.Row,styles.flexBetween]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    container:{
        height: 150,
        margin: 10,
        borderWidth: 1,
        borderColor: '#ddd',
    },
    h2:{
      fontSize: 30,
      marginHorizontal: 10,
      marginTop: 50,
    },
    h3:{
      fontSize: 24,
      marginHorizontal: 10,
    },
    itemBase:{
      height: 30,
      borderWidth: 1,
      borderColor: 'red',
      backgroundColor: '#dfb',
      padding: 4,
      textAlign: 'center',
    },
    Row:{
      flexDirection: 'row',
    },
    flexStart:{
      justifyContent: 'flex-start',
    },
    flexCentent:{
      justifyContent: 'center',
    },
    flexEnd:{
      justifyContent: 'flex-end',
    },
    flexColumnReverse:{
      justifyContent: 'flex-start',
    },
    flexAround:{
      justifyContent:'space-around',
    },
    flexEvenly:{
      justifyContent: 'flex-evenly',
    },
    flexBetween:{
      justifyContent:'space-between',
    }
})
